<template>
  <div>
    <button class="add-creatives-btn" @click="addCreatives">创意素材</button>
    <AddCreativePackage
      :creativeType="creativeType"
      ref="addCreativesRef"
      :maxPackageCount="5"
      :materialTypes="materialTypes"
      :tipTextConfig="tipTextConfig"
      @save="saveCreatives"
      :allowChangeCover="true"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import AddCreativePackage from "@/pages/NewBatchCreateAd/components/creatives/AddCreativePackage.vue";
import { batchCreateAdStore } from "@/pages/NewBatchCreateAd/store/batchCreateAdStore";
const store = batchCreateAdStore();

import { formatTargetStructure } from "./format";
const addCreativesRef = ref();

const creativeType = ref("自定义创意");
// 素材类型配置
const materialTypes = ref([
  { type: "largePic", name: "大图" },
  { type: "singlePic", name: "小图" },
  { type: "package3Pic", name: "组图" },
  { type: "verticalVideos", name: "竖版视频" },
  { type: "horizontalVideos", name: "横版视频" },
]);

// 素材提示文本配置
const tipTextConfig = ref({
  largePic: ["宽高比16:9", "尺寸>=960×540", "JPG、JPEG、PNG格式", "<500KB"],
  singlePic: ["宽高比3:2", "尺寸>=480×320", "JPG、JPEG、PNG格式", "<500KB"],
  package3Pic: ["宽高比3:2", "尺寸>=480×320", "JPG、JPEG、PNG格式", "<500KB"],
  verticalVideos: ["宽高比9:16", "尺寸>=540×960", "4~120秒", "<50MB", "MP4格式，需要有声音", "封面尺寸与视频一致，<500KB"],
  horizontalVideos: ["宽高比16:9", "尺寸>=960×540", "4~120秒", "<50MB", "MP4格式，需要有声音", "封面尺寸与视频一致，<500KB"],
});

const addCreatives = () => {
  addCreativesRef.value?.show();
};

const saveCreatives = (creativePackage: any) => {
  // const targetStructure = formatTargetStructure(creativePackage);
  const targetStructure = creativePackage
  console.log("创意包数据", targetStructure);
  targetStructure.forEach((item: any) => {
    store.Creatives.push(item);
  });
};
</script>

<style scoped>
.add-creatives-btn {
  padding: 8px 16px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 16px;
}

.creatives-list {
  margin-top: 20px;
}

.creatives-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
  margin-top: 12px;
}

.creative-card {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s;
}

.creative-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.creative-header {
  padding: 8px 12px;
  background-color: #f7f7f7;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.creative-type {
  font-weight: bold;
  color: #666;
}

.edit-btn {
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  margin-right: 8px;
  cursor: pointer;
}

.delete-btn {
  background-color: #ff4d4f;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
}

.creative-content {
  padding: 12px;
}

.large-pic img,
.single-pic img,
.video video {
  width: 100%;
  border-radius: 2px;
  object-fit: cover;
}

.package-pic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.package-pic img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 2px;
}

.video video {
  width: 100%;
  max-height: 200px;
}

.creative-footer {
  padding: 8px 12px;
  border-top: 1px solid #f0f0f0;
}

.creative-info p {
  margin: 4px 0;
  color: #333;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.empty-state {
  margin-top: 20px;
  padding: 24px;
  text-align: center;
  background-color: #f9f9f9;
  border-radius: 4px;
  color: #888;
}
</style>
